<template>
    <el-select
        v-if="isTrue"
        class="ks-select"
        :value="value"
        :multiple="Array.isArray(value)"
        :filterable="!!apiUrl || filterable"
        :remote="!!apiUrl"
        :clearable="clearable"
        :size="size"
        reserve-keyword
        :placeholder="placeholder"
        :remote-method="remoteMethod"
        :loading="loading"
        :disabled="disabled"
        @blur="onBlur"
        @change="addEventChang"
        @input="$emit('input', $event)"
    >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
    </el-select>
</template>

<script>
export default {
    name:'KsSelect',
    props:{
        // 占位符
        placeholder:{
            type:String,
            default:"",
            required:true
        },
        // 接口请对地址 如果有这个 代表启用远程搜索功能
        apiUrl:{
            type:String,
            default:''
        },
        methodsFn:{
            type:String,
            default:'post'
        },
        // 是否可搜索
        filterable:{
            type:Boolean,
            default:false
        },
        clearable:{
            type:Boolean,
            default:true
        },
        // 父组件v-model
        value:{
            type:[Number, String,Array],
            default:'',
        },
        // 默认数据 一般是编辑进入此页面
        list:{
            type:Array,
            default:()=>[]
        },
        // 是否禁用
        disabled:{
            type:Boolean,
            default:false
        },
        // 模糊搜索 需要传递给后端的参数
        searchParams:{
            type:Object,
            default:()=>{
                return {
                    searchKey:'keyworld'
                }
            }
        },
        // 模糊搜索请求接口 处理响应的回调方法 ， 主要用作把数据 转换成 el-select能识别的格式
        responseTransformFn:{
            type:[Boolean,Function],
            default:false
        },
        // 选中值发生变化时触发
        change:{
            type:[Boolean,Function],
            default:false
        }
    },
    data() {
        return {
            // 默认组件大小
            size:'small',
            options: [],
            loading: false,
            isTrue:true
        }
    },
    watch:{
        list(newVal){
            // eslint-disable-next-line no-undef
            this.options = _.cloneDeep(newVal)
        }
    },
    created() {
        try{
            // eslint-disable-next-line no-undef
            this.options = _.cloneDeep(this.list)
        }catch(err){
            this.$message.error('ks-select list格式解析失败');
        }
    },
    methods: {
        async remoteMethod(query) {
            if (query !== '') {

                this.loading = true;

                let params = {...this.searchParams};
                params[params.searchKey] = query;
                if(this.methodsFn==='get'){
                    params = {
                        params
                    }
                }
                let { data } = await this.$http[this.methodsFn](this.apiUrl,params);
                const setOptionsFn =(list=[])=>{
                    this.options = list;
                }
                this.responseTransformFn(data,setOptionsFn);
                this.loading = false;

            } else {
                this.options = [];
            }
        },
        addEventChang(value){
            if(this.change) this.change(this.options.find(item=>item.value===value));
        }
    }
}
</script>
